<template>
    <div class="search">
      <el-form ref="form1" :model="form1" label-width="80px">
        <h4 >字数限制</h4>
        <div class="box">
          <el-card class="box-card">
            <el-form-item label="活动名称">
              <el-input v-model="form1.name1" style="width: 400px" maxlength="20" show-word-limit></el-input>
            </el-form-item>
          </el-card>
          <copy ref="copyText" :code="8"></copy>
        </div>
  
        <h4>电话---数字(0不能开头 没有小数 负数 e)</h4>
        <div class="box">
          <el-card class="box-card">
            <el-form-item label="电话">
              <el-input v-model="form1.name2" style="width: 400px" maxlength="20" show-word-limit  oninput="value=value.replace(/\D|^0/g,'')"></el-input>
            </el-form-item>
          </el-card>
          <copy ref="copyText" :code="9"></copy>
        </div>
  
        <h4>数字编码---数字(0可以开头 没有小数 负数 e)</h4>
        <div class="box">
          <el-card class="box-card">
            <el-form-item label="数字编码">
              <el-input v-model="form1.name3" style="width: 400px" maxlength="20" show-word-limit  oninput="value=value.replace(/[^\d]/g,'')"></el-input>
            </el-form-item>
          </el-card>
          <copy ref="copyText" :code="10"></copy>
        </div>
        <h4>数字---正负数</h4>
        <div class="box">
          <el-card class="box-card">
            <el-form-item label="盈利">
              <el-input v-model="form1.name4" style="width: 400px" maxlength="20" show-word-limit  type="number"></el-input>
            </el-form-item>
          </el-card>
          <copy ref="copyText" :code="11"></copy>
        </div>
  
      </el-form>
    </div>
  </template>
    
  <script>
  import copy from '../../components/copy.vue'
  export default {
    components: { copy },
    data() {
      return {
        code: "",
        //
        form: {
          name: '',
          region: '',
          date1: '',
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          date1: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ]
        },
        form1:{
          name1:'',
          name2:'',
          name3:'',
          name4:''
        }
      }
    },
    created() {
  
    },
    methods: {
      onSubmit(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      }
    }
  }
  </script>
    
  <style lang="less" scoped>
  @import './basic.less';
 
  </style>
    
  